<template>
   <div>
      <el-card>
        <el-container>
        <el-header class="title">玉玺的联系人信息管理系统</el-header>
        <el-row>
          <el-col :span="8">
            <el-input placeholder="请输入内容" clearable v-model="StuQeuryBayPageDTO.stuName" class="input-with-select" @clear="getAllStudents">
              <el-button slot="append" icon="el-icon-search" @click="getAllStudents"></el-button>
            </el-input>
<!--              <h4>用户名：{{ username }}</h4>-->
<!--              <h4>密码：{{ password }}</h4>-->
<!--              <h4>当前在线人数:{{ countNum }}</h4>-->
          </el-col>


          <el-col :span="2">
            <el-button style="margin-left: 10px" @click="insert" type="primary">添加联系人</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="danger" style="margin-left: 550px" @click="logout">退出登陆</el-button>
          </el-col>

      </el-row>
        <el-main>
            <el-table :data="tableData"  stripe>
                <el-table-column type="index" label="编号" />
                <el-table-column prop="stuName" label="姓名"/>
                <el-table-column prop="stuAge" label="年龄"/>
                <el-table-column prop="stuAddress" label="地址"/>
                <el-table-column prop="stuPhone" label="联系电话"/>
                <el-table-column prop="stuPwd" label="标注" />
                <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope" width="150">
                    <el-button @click="update(scope.row)"  type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" @click="deleteById(scope.row.id)"  icon="el-icon-delete" circle></el-button>
                  </template>
                </el-table-column>
            </el-table>
        </el-main>
      </el-container>
        <el-pagination
            @size-change="handlePageSize"
            @current-change="handlePageNumber"
            :current-page="StuQeuryBayPageDTO.pageIndex"
            :page-sizes="[6, 15, 25, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" />
      </el-card>
     <el-dialog :title="title" width="40%" :visible.sync="open" @close="dialogClose">
       <el-form :model="form" ref="form" :rules="rules">
         <el-form-item label="姓名" prop="stuName">
           <el-input v-model="form.stuName"></el-input>
         </el-form-item>
         <el-form-item label="年龄" prop="stuAge">
           <el-input v-model="form.stuAge"></el-input>
         </el-form-item>
         <el-form-item label="住址" prop="stuAddress">
           <el-input v-model="form.stuAddress"></el-input>
         </el-form-item>
         <el-form-item label="联系电话" prop="stuPhone">
           <el-input v-model="form.stuPhone"></el-input>
         </el-form-item>
         <el-form-item label="标注" prop="stuPwd">
           <el-input v-model="form.stuPwd"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="clickCancle">取 消</el-button>
         <el-button type="primary" @click="clickOk">确 定</el-button>
       </div>
     </el-dialog>
   </div>
</template>

<style>
.title{
  text-align: center;
  font-size: 25px;
  font-family: 微软雅黑;
}
.logout{
  text-align: right;
  margin-left: 200px
}
</style>

<script>
  export default {
    data() {
      return {
        tableData: [],
        countNum:'1',
        username: '201931061175',
        password: '123456',
        StuQeuryBayPageDTO: {
          pageIndex: 1,
          pageSize: 6,
          stuAddress: null,
          stuName: null
        },
        size: 6,
        total: 0,
        open: false,
        form: {},
        title: '',
        rules: {
          stuName:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
          ],
          stuAddress:[
            { required: true, message: '请输入住址', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur' }
          ],
          stuPhone:[
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur' }
          ],
          stuPwd:[
            { required: true, message: '请输入对此人的批注', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created(){
        this.getAllStudents()
    },
    methods:{
      //关闭对话框事件
      dialogClose() {
        this.$refs.form.resetFields();
        // this.findPage()
      },
      handlePageNumber(newPageNumber){
        this.StuQeuryBayPageDTO.pageIndex = newPageNumber;
        this.getAllStudents();
      },
      handlePageSize(newPageSize){
        this.StuQeuryBayPageDTO.pageSize = newPageSize;
        this.getAllStudents();
      },
      getAllStudents(){
        //要请求的地址
        var url="/student/stu/pageList"
        //发送axios请求 $http事务封装的接口地址
        this.$http.post(url,this.StuQeuryBayPageDTO).then(res=>{
          console.log("学生展示的返回值：");
          console.log(res);
          //把学生的信息赋值给tableData
          this.tableData=res.data.data.records;
          this.total = res.data.data.total;
        })
      },
      insert() {
        this.form = {};
        this.title = '新增联系人';
        this.open = true
      },
      update(row){
        this.form = row;
        this.title = '修改联系人';
        this.open = true;
      },
      deleteById(id){
        this.$confirm('此操作将退出删除编号为(' + id + '), 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(`/student/stu/del/${id}`).then((res) => {
            this.$message.success(res.data.message);
            this.StuQeuryBayPageDTO.pageIndex = 1;
            this.getAllStudents();
          })
        }).catch(() => {

        });
      },
      clickOk() {
        //进行表单校验
        this.$refs.form.validate((valid) => {
          if (!valid){
            return this.$message.error('表单校验不通过，请检查后提交');
          }
          if (this.form.id === undefined ||this.form.id ==null){
            this.$http.post('/student/stu/add',this.form).then((res) => {
              this.$message.success('新增成功');
              this.open = false;
              this.getAllStudents()
            })
          }else {
            this.$http.post('/student/stu/update',this.form).then((res) => {
              this.$message.success('修改成功');
              this.open = false;
              this.getAllStudents()
            });
          }
        })
        this.form = {};
      },
      clickCancle(){
        this.form = {};
        this.open = false;
        this.getAllStudents()
      },
      logout(){
        this.$confirm('此操作将退出登陆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/');
        }).catch(() => {

        });
      }
    }
  }
</script>
